<template>
  <div class="blog-admin-container">
    <el-card>
      <div class="blog-admin-container-title">网站管理</div>
      <div class="website-operation-container" />
      <el-tabs v-model="activeName">
        <el-tab-pane label="网站配置" name="toConfigure">
          <el-form class="website-form" label-position="left" label-width="80px" :model="webInfoData">
            <el-form-item label-width="90px" label="网站简写">
              <el-input v-model="webInfoData.website_title" class="website-input" clearable :disabled="!updateSwitch.updateWebsiteTitle" />
              <el-switch
                v-model="updateSwitch.updateWebsiteTitle"
                style="margin-left: 10px"
              />
            </el-form-item>
            <el-form-item label-width="90px" label="公告">
              <el-input v-model="webInfoData.notice" class="website-input" type="textarea" :rows="2" />
            </el-form-item>
            <el-form-item label-width="90px" label="域名备案号">
              <el-input v-model="webInfoData.website_records" class="website-input" :disabled="!updateSwitch.updateWebsiteRecords" clearable />
              <el-switch
                v-model="updateSwitch.updateWebsiteRecords"
                style="margin-left: 10px"
              />
            </el-form-item>
            <el-form-item>
              <el-button class="website-button" type="primary" @click="updateWebsiteData">保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="关于我" name="aboutMe">
          <div class="about-me">
            <el-form class="website-form" label-position="left" label-width="80px" :model="blogInfoData">
              <el-form-item label-width="90px" label="用户名">
                <el-input v-model="blogInfoData.username" disabled class="website-input" />
              </el-form-item>
              <el-form-item label-width="90px" label="网站名称">
                <el-input v-model="blogInfoData.blog_name" class="website-input" clearable />
              </el-form-item>
              <el-form-item label-width="90px" label="用户头像">
                <el-switch
                  v-model="linkSwitchImage"
                  active-text="链接"
                  inactive-text="文件"
                  style="margin-left: 10px"
                />
                <el-upload
                  v-if="linkSwitchImage"
                  drag
                  multiple
                  action="null"
                  :http-request="imageUpload"
                >
                  <el-image
                    style="width: 100%; height: 100%"
                    :src="blogInfoData.user_image_url"
                    fit="cover"
                  />
                </el-upload>
                <el-input v-else v-model="blogInfoData.user_image_url" class="website-input" clearable />
              </el-form-item>
              <el-form-item label-width="90px" label="座右铭">
                <el-input v-model="blogInfoData.motto" class="website-input" clearable />
              </el-form-item>
              <el-form-item label-width="90px" label="邮箱地址">
                <el-input v-model="blogInfoData.email" class="website-input" clearable />
              </el-form-item>
            </el-form>
            <el-form class="website-form" label-position="left" label-width="80px" :model="blogInfoData">
              <el-form-item label-width="90px" label="QQ">
                <el-input v-model="blogInfoData.qq_account" class="website-input" clearable />
              </el-form-item>
              <el-form-item label-width="90px" label="github">
                <el-input v-model="blogInfoData.github_link" class="website-input" clearable />
              </el-form-item>
              <el-form-item label-width="90px" label="gitee">
                <el-input v-model="blogInfoData.gitee_link" class="website-input" clearable />
              </el-form-item>
              <el-form-item label-width="90px" label="关于我">
                <el-input v-model="blogInfoData.about" class="website-input" type="textarea" :rows="5" />
              </el-form-item>
            </el-form>
          </div>
          <div class="bloginfo-button"><el-button class="website-button" type="primary" @click="updateWebInfoData">保存</el-button></div>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="UpdatePassword">
          <el-form class="website-form" label-position="left" label-width="80px" :model="updatePassword">
            <el-form-item label-width="90px" label="原密码">
              <el-input v-model="updatePassword.oldPassword" class="website-input" clearable show-password />
            </el-form-item>
            <el-form-item label-width="90px" label="新密码">
              <el-input v-model="updatePassword.newPassword" class="website-input" clearable show-password />
            </el-form-item>
            <el-form-item label-width="90px" label="确认密码">
              <el-input v-model="updatePassword.confirmPassword" class="website-input" clearable show-password />
            </el-form-item>
            <el-form-item>
              <el-button class="website-button" type="primary" @click="updatePasswordClick">保存</el-button>
            </el-form-item>
          </el-form>

        </el-tab-pane>
      </el-tabs>

    </el-card>
  </div>
</template>

<script>
import { uploadOSS, uploadToken } from '@/api/user'
import { getWebsite, updateWebsite, getWebInfo, updateWebInfo, updatePassword } from '@/api/website'
import { Message } from 'element-ui'

export default {
  name: 'Website',
  data() {
    return {
      activeName: 'toConfigure',
      linkSwitchImage: true,
      id: '',
      updateSwitch: {
        updateWebsiteTitle: false,
        updateWebsiteRecords: false
      },
      webInfoData: {
        website_title: '',
        notice: '',
        website_records: ''

      },
      blogInfoData: {
        id: '',
        about: '',
        blog_name: '',
        email: '',
        gitee_link: '',
        github_link: '',
        motto: '',
        qq_account: '',
        user_image_url: '',
        username: ''
      },
      updatePassword: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    }
  },
  created() {
    this.getWebsiteData()
    this.getWebInfoData()
  },
  methods: {

    getWebsiteData() {
      getWebsite().then(resp => {
        this.webInfoData = resp.data
      })
    },
    updateWebsiteData() {
      updateWebsite(this.webInfoData).then(resp => {
        Message({
          message: '修改成功!',
          type: 'success',
          duration: 5 * 1000
        })
      })
    },
    getWebInfoData() {
      getWebInfo().then(resp => {
        this.blogInfoData = resp.data
      })
    },
    updateWebInfoData() {
      updateWebInfo(this.blogInfoData).then(resp => {
        this.$store.commit('user/SET_NAME', resp.data.username)
        this.$store.commit('user/SET_AVATAR', resp.data.user_image_url)
        Message({
          message: '更新成功!',
          type: 'success',
          duration: 5 * 1000
        })
      })
    },
    updatePasswordClick() {
      const params = { id: this.$store.getters.id, password: this.updatePassword.oldPassword,
        new_password: this.updatePassword.newPassword,
        confirm_password: this.updatePassword.confirmPassword
      }
      updatePassword(params).then(resp => {
        Message({
          message: '修改密码成功!',
          type: 'success',
          duration: 5 * 1000
        })
        this.logout()
      })
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    imageUpload(file) {
      const this_ = this
      uploadToken('image').then(resp => {
        uploadOSS(resp.data.token, file.file).then(resp => {
          Message({
            message: '上传成功!',
            type: 'success',
            duration: 5 * 1000
          })
          this_.blogInfoData.user_image_url = resp.config.url.split('?')[0]
        })
      })
    }
  }
}
</script>

<style scoped>

  .website-input {
    min-width: 450px;
    max-width: 500px;
  }

  .website-form {
    margin-top: 25px;
    margin-left: 25px;
  }
  .website-button {
    margin-left: 10px;
    width: 500px;
  }

  .about-me {
    display: flex;
    justify-content: space-around;
  }

  .bloginfo-button {
    text-align: center;
  }
</style>
